<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>田园生活</title>
		<style type="text/css">
			canvas{
				width: 1000px;
				height: 800px;
				border: 1px solid black;
				background: url(img/timg.jpg);
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" height="300" ></canvas>
		<script type="text/javascript">
			var canvas=document.getElementById("myCanvas");
			var ctx=canvas.getContext("2d");
		     ctx.fillStyle="lightsalmon";
			ctx.beginPath();          
			ctx.moveTo(200,100);
			ctx.lineTo(300,150);
			ctx.lineTo(100,150);
			ctx.lineTo(200,100);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="red";
			ctx.beginPath();
			ctx.moveTo(200,105);
			ctx.lineTo(280,145);
			ctx.lineTo(120,145);
			ctx.lineTo(200,105);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="yellow";
			ctx.beginPath();
			ctx.moveTo(190,110);
			ctx.lineTo(210,110);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(180,115);
			ctx.lineTo(220,115);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(170,120);
			ctx.lineTo(230,120);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(160,125);
			ctx.lineTo(240,125);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(150,130);
			ctx.lineTo(250,130);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(140,135);
			ctx.lineTo(260,135);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(130,140);
			ctx.lineTo(270,140);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			/*矩形*/
			ctx.fillStyle="blanchedalmond";
			ctx.beginPath();
			ctx.moveTo(120,150);
			ctx.lineTo(280,150);
			ctx.lineTo(280,230);
			ctx.lineTo(120,230);
			ctx.lineTo(120,150);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			/*窗户*/
			ctx.fillStyle="cornflowerblue";
			ctx.beginPath();
			ctx.moveTo(150,170);
			ctx.lineTo(160,170);
			ctx.lineTo(160,180);
			ctx.lineTo(150,180);			
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="cornflowerblue";
			ctx.beginPath();
			ctx.moveTo(160,170);
			ctx.lineTo(170,170);
			ctx.lineTo(170,180);
			ctx.lineTo(160,180);			
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="cornflowerblue";
			ctx.beginPath();
			ctx.moveTo(150,180);
			ctx.lineTo(150,190);
			ctx.lineTo(160,190);
			ctx.lineTo(160,180);			
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="cornflowerblue";
			ctx.beginPath();
			ctx.moveTo(170,180);
			ctx.lineTo(170,190);
			ctx.lineTo(160,190);
			ctx.lineTo(160,180);						
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="cornflowerblue";
			ctx.beginPath();
			ctx.moveTo(220,170);
			ctx.lineTo(235,170);
			ctx.lineTo(235,180);
			ctx.lineTo(220,180);			
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="cornflowerblue";
			ctx.beginPath();
			ctx.moveTo(235,170);
			ctx.lineTo(250,170);
			ctx.lineTo(250,180);
			ctx.lineTo(235,180);			
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="cornflowerblue";
			ctx.beginPath();
			ctx.moveTo(220,180);
			ctx.lineTo(220,190);
			ctx.lineTo(235,190);
			ctx.lineTo(235,180);			
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="cornflowerblue";
			ctx.beginPath();
			ctx.moveTo(235,190);
			ctx.lineTo(250,190);
			ctx.lineTo(250,180);
			ctx.lineTo(235,180);						
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			/*门*/
			ctx.fillStyle="gray";
			ctx.beginPath();
			ctx.moveTo(190,180);
			ctx.lineTo(210,180);
			ctx.lineTo(210,230);
			ctx.lineTo(190,230);						
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			
			/*树*/
			ctx.fillStyle="grey";
			ctx.beginPath();
			ctx.moveTo(40,150);
			ctx.lineTo(45,150);
			ctx.lineTo(45,220);
			ctx.lineTo(40,220);						
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="green";
			ctx.beginPath();
			ctx.moveTo(42.5,120);
			ctx.lineTo(70,150);
			ctx.lineTo(15,150);
			ctx.lineTo(42.5,120);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="green";
			ctx.beginPath();
			ctx.moveTo(42.5,140);
			ctx.lineTo(90,170);
			ctx.lineTo(0,170);
			ctx.lineTo(42.5,140);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			/*烟筒*/
			ctx.fillStyle="darkgoldenrod";
			ctx.beginPath();
          	ctx.moveTo(160,100);
			ctx.lineTo(170,100);
			ctx.lineTo(170,115);
			ctx.lineTo(160,120);
			ctx.lineTo(160,100);
			ctx.closePath();
			ctx.fill()
			ctx.stroke();
			ctx.style
			ctx.beginPath();
          	ctx.moveTo(0,0);
			ctx.lineTo(300,0);
			ctx.lineTo(300,300);
			ctx.lineTo(300,0);
			ctx.lineTo(0,0);
			ctx.closePath();
			ctx.fill()
			ctx.stroke();
			/*太阳*/
			ctx.fillStyle="yellow";
			ctx.beginPath();
			ctx.arc(60,60,20,0,2*Math.PI)
			ctx.shadowBlur=50;
			ctx.shadowColor="yellow";
			ctx.lineTo(80,60);			
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.moveTo(90,60);
			ctx.lineTo(110,60)
			ctx.closePath();
			ctx.stroke();
			ctx.moveTo(30,60);
			ctx.lineTo(10,60)
			ctx.closePath();
			ctx.stroke();
			ctx.moveTo(60,30);
			ctx.lineTo(60,10)
			ctx.closePath();
			ctx.stroke();
			ctx.moveTo(60,90);
			ctx.lineTo(60,110)
			ctx.closePath();
			ctx.stroke();
			ctx.moveTo(100,20);
			ctx.lineTo(80,40)
			ctx.closePath();
			ctx.stroke();
			ctx.moveTo(80,80);
			ctx.lineTo(100,100)
			ctx.closePath();
			ctx.stroke();
			ctx.moveTo(40,80);
			ctx.lineTo(20,100)
			ctx.closePath();
			ctx.stroke();
			ctx.moveTo(15,25);
			ctx.lineTo(35,40)
			ctx.closePath();
			ctx.stroke();
			
		
			
			
		</script>
		
	</body>
</html>
